<template>
   <el-table
    :data="sortList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="ID"
      min-width="180">
    </el-table-column>
    <el-table-column
      prop="img"
      label="分类图片"
      min-width="180" v-slot="props">
      <template>
          <img style="width: 50px" v-if="props.row.img" :src="'http://127.0.0.1:3000/'+props.row.img">
      </template>      
    </el-table-column>
    <el-table-column
      prop="catename"
      label="分类名称"
      min-width="180">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      min-width="180" v-slot="props">
      <template>
          <el-button v-if="props.row.status == 1" type="success" size="mini" plain>正常</el-button>
          <el-button v-if="props.row.status == 0" type="danger" size="mini" plain>禁用</el-button>
      </template>
            
    </el-table-column>
    <el-table-column
      label="操作"
      min-width="180" v-slot="props">
        <template>
          <el-button  icon="el-icon-edit" type="success" size="mini" circle></el-button>
          <el-button @click="delSort(props.row.id)" icon="el-icon-delete" type="danger" size="mini" circle></el-button>
        </template>  
    </el-table-column>
  </el-table>
</template>

<script>
export default {
    props: ["sortList"],
    methods: {
      delSort(id){
        this.$http.post("/catedelete",{id:id}).then(
          res=>{
            this.$emit("updateCate")
            console.log(res)
          }
        )
      }
    },
    data(){
        return {
        }
    }
}
</script>

<style>

</style>